import Taro, { Component } from '@tarojs/taro'
import { View, Text } from '@tarojs/components'
import './transactionrecord.css'
import { AtAccordion,AtList,AtListItem,AtIcon } from 'taro-ui'
import reactMixin from 'react-mixin';
import myJs from './transactionrecordJs.js'
import app from '../../../../main.js'

export default class TransactionRecord extends Component {

  config = {
    navigationBarTitleText: '交易记录'
  }
  constructor () { 
        super(...arguments); 
        this.state = this.getData(); 
  }

  offset = 0
  length = 25


  onClick (value) {
    this.setState({
      open: value
    })
  }
  onClick2 (value) {
    this.setState({
      open2: value
    })
  }
  price(){
    console.log('generalIncome',this.state.generalIncome)
    return this.state.generalIncome;
    // console.log("执行")
    // let sun = 0.00
    // let arr = this.state.income_rocordss.items
    // console.log(arr)
    // console.log(this.state.income_rocordss.items)
    // if(arr){
    //   for(let i = 0; i<arr.length;i++){
    //     sun += parseFloat(arr[i].money)
    //     console.log(typeof arr[i].money)
    //     console.log("执行循环")
    //     console.log(sun)
    //   }  
    //   return sun;
    // }
    // return sun;
  }

  //全部数据
  clearData () {
     let me = this
     let data = {offset:this.offset, length: this.length}
     this.setState({
        dateSel:''
     },()=>{
        app.post('web/wallet/transactionRecord', data, (res)=>{
            me.setState({
                income_rocordss:{items:res.data.result.result}
            })
        })
     })
  }

  onDateChange (e) {
    let me = this
    this.setState({
      dateSel: e.detail.value
    },()=>{
      let years = this.state.dateSel.slice(0,4)
      let months
      if(this.state.dateSel.slice(5,7).indexOf(0) == 0){
        months = this.state.dateSel.slice(6,7)
      }else{
        months = this.state.dateSel.slice(5,7)
      }
      let data = {offset:this.offset, length: this.length, year:years, month:months}
      app.post('web/wallet/transactionRecord', data, (res)=>{
        console.log("钱",res.data.result.generalIncome)
         me.setState({
            generalIncome : res.data.result.generalIncome,
            income_rocordss:{items:res.data.result.result}
         })
      })
    })
  }

   init () {
     let date = new Date()
     let hour = date.getFullYear()
     let month = (date.getMonth() + 1) > 10 ? (date.getMonth() + 1) : '0'+(date.getMonth() + 1)
     let nowTime = hour+'-'+month
     this.setState({
       open:true,
       dateSel:nowTime
     })
   }

  render () {
    return (
      <View className='transaction-record'>
      <View className='nav'>
      <AtAccordion
        title='按月份筛选'
        className='time'
        open={this.state.open}
        onClick={this.onClick.bind(this)}
        >
          <View className='page-section'>
            <View>
              <Picker fields='year' fields='month' mode='date' onChange={this.onDateChange.bind(this)}>
                <View className='picker'>
                  当前选择：{this.state.dateSel}
                  <Text className='allprice'>总收入：{this.state.generalIncome}</Text>
                </View>
              </Picker>
            </View>
            <View className='page-icon' onClick={this.clearData.bind(this)}>
               <AtIcon value='close-circle' size='20' color='rgba(0,0,0,0.6)'></AtIcon>
            </View>
          </View>
      </AtAccordion>
      </View>
      <AtList>
      {
        this.state.income_rocordss.items.length == 0 ? <View className='record'>暂无交易记录</View> :
        this.state.income_rocordss.items.map((item) =>
            <AtListItem title={item.desc+' '+item.created_at} note={item.status} extraText={'收入：'+item.money+'元'}/>)
      }
    </AtList>
      </View>
    )
  }
}
reactMixin.onClass(TransactionRecord,myJs);
